<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加卡卷</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav {
            display: flex;
            justify-content: center;
            background-color: #444;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: block;
        }

        nav a:hover {
            background-color: #555;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        .content {
            padding: 20px;
            background: white;
            margin-top: 20px;
        }

        .promo, .order-form {
            background-color: #e9e9e9;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
        }

        .promo h2, .order-form h2 {
            margin-top: 0;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            bottom: 0;
        }


    </style>
</head>
<body>
<div id="test">


    <van-cell-group>
        <van-field v-model="phonenumber" label="手机号"/>
    </van-cell-group>
    <van-cell-group>
        <van-field v-model="carnumber" label="车牌号"/>
    </van-cell-group>
    <div style=" display: flex;
  justify-content: center;">

        <van-cell-group>
            <van-button round style=" width: 300px;" type="info" @click="showPopup">选择卡券类型</van-button>
        </van-cell-group>
    </div>


    <van-popup v-model="show">
        <div style="width: 300px; height: 300px; ">

            <van-radio-group v-model="radio">
                <van-radio name="1">轿车普洗次卡400 12次</van-radio>
                <van-radio name="2">越野车普洗次卡 500 12次</van-radio>
                <van-radio name="3">贴膜优惠券 100元</van-radio>
                <van-radio name="4">夏日畅洗卡188元10次</van-radio>
                <van-radio name="5">雨季补偿卡</van-radio>
                <van-radio name="6">通用补偿卡</van-radio>
                <van-radio name="7">打蜡卷</van-radio>
                <van-radio name="8">精洗卷</van-radio>
                <van-radio name="9">微精洗卷</van-radio>
                <van-radio name="10">保养卷</van-radio>
                <van-radio name="11">300元储值</van-radio>
                <van-radio name="12">500元储值</van-radio>
                <van-radio name="13">400元储值</van-radio>
            </van-radio-group>
            <van-cell-group>
                <van-button round style=" width: 200px;" type="info" @click="showPopupa">确定</van-button>


            </van-cell-group>

        </div>


    </van-popup>
    <van-dialog v-model="dialogVisible" show-cancel-button>
        {{ dialogMessage }}
    </van-dialog>

</div>

<script>

    new Vue(
        {
            el: '#test',

            data: {

                phonenumber: '',
                carnumber: '',
                show: false,
                radio: '1',
                dialogVisible: false,
                dialogMessage: '会员还未注册'

            },
            methods: {


                //开卡前查询按钮
                showPopup() {

                    // this.dialogVisible=true;
                    const params = {
                        username: this.phonenumber,
                        password: this.carnumber,

                    };

                    axios.post("/vipinfo", params)
                        .then(response => {
                            if (response.data.carnumber !== null) {
                                // 查询成功

                                this.show = true;
                                // this.showPopupa()

                            } else {
                                // 失败，显示错误信息
                                console.log(response.data.code);
                                window.alert(response.data.msg);

                                this.dialogVisible = true

                            }
                        })
                        .catch(error => {
                            // 请求失败，显示错误信息
                            // window.alert(error.response ? error.response.data.message : '请求失败');
                            // console.error('请求失败:', error);
                            this.dialogVisible = true

                        });
                },

                //开卡按钮
                showPopupa() {
                    const params = {
                        username: this.phonenumber,
                        password: this.carnumber,
                        radio: this.radio,
                    };

                    axios.post("/addcard", params)
                        .then(response => {
                            if (response.data.data === "200") {
                                // 添加成功

                            } else {
                                // 登录失败，显示错误信息
                                console.log(response.data.code);
                                window.alert(response.data.msg);
                                // 关闭loading

                            }
                        })
                        .catch(error => {
                            // 请求失败，显示错误信息
                            window.alert(error.response ? error.response.data.message : '请求失败');
                            console.error('请求失败:', error);

                        });
                },

            }
        });
</script>

</body>
</html>
